<template>
  <div class="login-box">
    <div class="input-box">
      <img src="@/assets/login-input-bg.png" alt="">
      <div class="input-box-form">
        <div class="input-box-form-title">临时用地办理一件事</div>
        <div class="input-box-form-item">
          <span class="input-box-form-item-title">手机号</span>
          <input v-model='form.telephone' type="text" placeholder="请输入手机号">
        </div>
        <div class="input-box-form-item">
          <span class="input-box-form-item-title">验证码</span>
          <input v-model='form.authCode' type="text" placeholder="请输入验证码">
          <span v-if="second==0" class="input-box-form-item-code" @click="getCode">获取验证码</span>
          <div v-else class="input-box-form-item-code">{{ second }}s后重试</div>
        </div>
        <div class="login-button" @click="login">登录</div>
      </div>
    </div>
    <div class="bottom-box">
      应用责任单位：酉阳土家族苗族自治县规划和自然资源局
    </div>
  </div>
</template>

<script>
import service from "@/service/apiService";
export default {
  data(){
    return{
      form:{
        telephone:'',
        authCode:''
      },
      second:0,
      secondIntrval:null,
    }
  },
  mounted(){
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const paramValue = urlParams.get('authCode')
    if (paramValue) {
      this.getYkbUserInfo(paramValue)
    }
  },
  methods:{
    
    getYkbUserInfo(authCode){
      service.getYkbUserInfo({
        "ykbFlag": "2",
				'authCode': authCode
      }).then(res=>{
        let user = res.data
        window.localStorage.setItem('userInfo',JSON.stringify(user))
        this.$router.push('putInfo')

      }).catch(err=>{
        this.$message({
          message: err,
          type: "warning",
        });
      })
    },

    getCode(){
      if (!this.checkTelephone(this.form.telephone)) {
      this.$message({
          message: '请准确输入手机号',
          type: 'warning'
        });
        return
      }
      
      service.getCode(this.form.telephone).then(res=>{
        this.startTimer()
      }).catch(err=>{
        this.$message({
          message: err,
          type: 'warning'
        });
      })
    },
    login(){
      service.login(this.form).then(res=>{
        let user = res.data
        window.localStorage.setItem('userInfo',JSON.stringify(user))
        this.$router.push('putInfo')
      }).catch(err=>{
        this.$message(err)
      })
    },
    startTimer(){
				clearInterval(this.secondIntrval);
				this.second = 60;
				this.secondIntrval = setInterval(() => {
					this.second--;
					if (this.second === 0) {
						clearInterval(this.secondIntrval);
					}
				}, 1000);
			},
    checkTelephone(telephone) {
      var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(telephone)) {
          return false;
      } else {
          return true;
      }
    }

  }
}
</script>

<style lang="less" scoped>
.bottom-box{
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 22px;
}
.login-box{
  background-image: url(../../assets/login-bg.png);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-box{
  display: flex;
  img{
    width: 523px;
    height: 510px;
  }
  &-form{
    width: 523px;
    height: 510px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    &-title{
      font-size: 30px;
      color: #444444;
      margin-bottom:70px;
    }
    &-item{
      font-weight: 400;
      font-size: 16px;
      color: #1B1B1B;
      display: flex;
      width: auto;
      margin: 0px 62px;
      width: -webkit-fill-available;
      margin-bottom:60px;
      border-bottom: solid 1px  #CECED0;
      padding-bottom: 10px;
      &-title{
        margin-right: 15px;
      }
      &-code{
        font-weight: 400;
        font-size: 16px;
        color: #1971CB;
        margin-left: 10px;
        cursor: pointer;
      }
      input{
        flex: 1;
        border: none;
        font-size: 14px;
        padding: 5px 10px;
      }
    }
    .login-button{
      background-color: #0F84D3;
      color: #fff;
      font-size: 18px;
      border-radius: 4px;
      text-align: center;
      padding: 5px 0px;
      width: 337px;
      cursor: pointer;
    }
  }
}
</style>

